<!--
 * @Author: shengxiaozhu 1651260742@qq.com
 * @Date: 2025-10-19 16:42:32
 * @LastEditors: Carl Yang
 * @LastEditTime: 2025-11-10 22:32:32
 * @FilePath: \linloong-eucalyptus-web\eucalyptus-frontend\src\views\forest-management\components\decisionMaking\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="decision-making px-3">
    <div class="text-2xl font-bold mb-4">设置效益比重</div>
    <div class="flex items-center gap-5">
      <div class="flex-1 border-2 border-[#2B6E50] rounded-[50px] px-5">
        <el-slider v-model="economicWeight" size="large" />
      </div>
      <div class="decision-btn">
        <el-Button type="primary" color="#2B6E50" @click="getAiFangAn">方案推理</el-Button>
      </div>
    </div>
    <div class="flex gap-5">
      <div class="flex justify-between mt-2 text-xl flex-1">
        <div class="font-bold">经济效益：{{ economicWeight }}%</div>
        <div class="font-bold">生态效益：{{ ecoWeight }}%</div>
      </div>
      <div class="decision-btn"></div>
    </div>
    <div class="text-2xl font-bold mt-6 mb-3">生成方案展示</div>
    <div class="flex gap-4">
      <div class="bg flex-1 border border-[#C4C4CC] rounded-3xl relative"
        :class="{ active: activePlan === '桉树中径材用材林栽培模式' }" @click="activePlan = '桉树中径材用材林栽培模式'">
        <img class="absolute right-[-1px] top-[-1px]" src="@/assets/images/plan2.png" />
        <div class="relative z-10">
          <div class="plan-title title text-xl text-[#2B6E50] font-bold px-5 py-4">
            桉树中径材用材林栽培模式
          </div>
          <div class="plan-wrap">
            <div class="content-html" v-html="reports.high_yield_model.contentHtml" />
          </div>
        </div>
      </div>
      <div class="bg flex-1 border border-[#C4C4CC] rounded-3xl relative"
        :class="{ active: activePlan === '桉树大径材用材林栽培模式' }" @click="activePlan = '桉树大径材用材林栽培模式'">
        <img class="absolute right-[-1px] top-[-1px]" src="@/assets/images/plan2.png" />
        <div class="relative z-10">
          <div class="plan-title text-xl text-[#2B6E50] font-bold px-5 py-4">桉树大径材用材林栽培模式</div>
          <div class="plan-wrap">
            <div class="content-html" v-html="reports.forest_intercropping.contentHtml" />
          </div>
        </div>
      </div>
      <div class="bg flex-1 border border-[#C4C4CC] rounded-3xl relative" :class="{ active: activePlan === '混交栽培模式' }"
        @click="activePlan = '混交栽培模式'">
        <img class="plan-title absolute right-[-1px] top-[-1px]" src="@/assets/images/plan2.png" />
        <div class="relative z-10">
          <div class="plan-title text-xl text-[#2B6E50] font-bold px-5 py-4">混交栽培模式</div>
          <div class="plan-wrap">
            <div class="content-html" v-html="reports.mixed_culture_system.contentHtml" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useForestService } from '@/composables/useForestService'

const { sendToAI, reports, conversationId } = useForestService()

const props = defineProps<{
  fileId: string
}>()

const economicWeight = ref(0)
const ecoWeight = computed(() => 100 - economicWeight.value)

const visData = defineModel<any>('visData', { default: () => ({}) })
const activePlan = defineModel<any>('activePlan', { default: '' })
const planMaking = defineModel<any>('planMaking', { default: () => [] })
const conversation_id = defineModel<any>('conversationId', { default: '' })

const getAiFangAn = async () => {
  const economicRatio = economicWeight.value / 100
  const ecoRatio = ecoWeight.value / 100
  sendToAI('', 'sljy-gczp', {
    economicWeight: economicRatio,
    ecoWeight: ecoRatio,
    fileId: props.fileId,
  }).then((res) => {
    // 下载方案传参
    planMaking.value = [
      {
        modelType: 'gczp',
        markdownContent: res.high_yield_model.contentHtml,
      },
      {
        modelType: 'lxtz',
        markdownContent: res.forest_intercropping.contentHtml,
      },
      {
        modelType: 'hjzp',
        markdownContent: res.mixed_culture_system.contentHtml,
      },
    ]
  })
}

watch(() => conversationId.value, () => {
  conversation_id.value = conversationId.value
}, { deep: true, immediate: true })
</script>

<style scoped lang="scss">
.decision-making {

  :deep(.el-slider__runway),
  :deep(.el-slider__bar) {
    height: 22px;
    border-radius: 22px;
  }

  :deep(.el-slider__runway) {
    background-color: transparent;
  }

  :deep(.el-slider__button-wrapper),
  :deep(.el-slider__button) {
    width: 52px;
    height: 52px;
  }

  :deep(.el-slider__button-wrapper) {
    top: -16px;
  }

  :deep(.el-slider__button) {
    border: none;
    background: conic-gradient(from 90deg at 50% 0%, #8ccd73 0%, #2b6e50 100%);
    box-shadow: -2px 2px 8px 0px rgba(42, 92, 69, 0.8);
  }

  :deep(.el-slider__bar) {
    background: conic-gradient(from 180deg at 100% 50%, #2b6e50 0%, #a0cc70 100%);
  }

  .decision-btn {
    width: 180px;

    .el-button {
      width: 180px;
      height: 52px;
      font-size: 20px;
      font-weight: bold;
      border-radius: 10px;
    }
  }

  .plan-title {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;

    &::before {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 8px solid #2b6e50;
      opacity: 0;
    }
  }

  .active {
    .plan-title::before {
      opacity: 1;
    }
  }

  .plan-wrap {
    margin-top: 10px;
    padding-bottom: 20px;

    .content-html {
      height: calc(100vh - 500px);
      overflow-y: auto;
      padding: 0 20px;

      :deep(table) {
        border-width: 1px 0 0 1px;

        tr {
          border-bottom-width: 1px;
        }

        td,
        th {
          border-right-width: 1px;
        }
      }
    }
  }
}
</style>
